<template>
  <!--height 固定表头-->
  <!--border 边框-->
  <div class="list-container">
    <el-form class="search-panel" v-model="sercchData" :inline="true">
      <el-form-item label-width="90px" class="search-input" label="工种名称：">
        <el-input v-model="sercchData.name" placeholder="工种名称"></el-input>
      </el-form-item>
      <!-- <el-form-item label-width="90px" class="search-time" label="工种类型：">
        <el-select v-model="region" placeholder="请选择工种类型">
          <el-option label="全部" value="all"></el-option>
          <el-option label="工种1" value="moneyInPlace"></el-option>
          <el-option label="工种2" value="moneyCant"></el-option>
          <el-option label="工种3" value="moneyCant"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item style="width: 90px; text-align: right">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-row class="table-operate">
        <el-button type="primary" icon="el-icon-plus" @click="toAddWorkType">
          新增工种</el-button
        >
      </el-row>
      <el-table
        ref="filterTable"
        class="work-type-switch"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          fixed
          type="index"
          fit
          width="90px"
          align="center"
        >
        </el-table-column>
        <!--    工种-->
        <el-table-column prop="workTypeName" label="工种" fit align="center">
        </el-table-column>

        <!--    状态-->
        <el-table-column prop="status" label="状态" fit align="center">
          <template slot-scope="scope">
            <el-switch
              class="switch"
              active-text="启用"
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              inactive-text="禁用"
              :active-value="1"
              :inactive-value="0"
              @change="statusChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>

        <!--    操作-->
        <el-table-column label="操作" fixed="right" fit align="center">
          <template slot-scope="scope" align="center">
            <el-button
              type="text"
              @click="updateRow(scope.row)"
              icon="el-icon-edit"
            >
              修改
            </el-button>
            <el-button
              type="text"
              @click="deleteRow(scope.row.id)"
              icon="el-icon-delete"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="totalData"
        >
        </el-pagination>
      </el-row>
    </div>
    <!--   修改-->
    <el-dialog
      class="small-dialog"
      :title="operateKey == 'update' ? '修改工种信息' : '添加工种信息'"
      :visible.sync="OptionEdit"
      width="600px"
    >
      <el-form
        :model="editForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="工种名称：" prop="workTypeName">
          <el-input
            style="width: 220px"
            v-model="editForm.workTypeName"
            placeholder="请输入工种名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="工种状态：" prop="status">
          <template>
            <el-switch
              v-model="editForm.status"
              active-text="启用"
              active-color="#13ce66"
              inactive-color="#ff4949"
              inactive-text="禁用"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleUpdate">取 消</el-button>
        <el-button type="primary" @click="confirmUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getWorkType,
  deleteWorkType,
  updateOrInsertWorkType,
} from "@/api/worker.js";
export default {
  data() {
    return {
      sercchData: {
        name: "",
        // startToEnd: "",
      },
      jobstatus: false,
      OptionGiveMoney: false,
      OptionEdit: false,
      OptionDeleteVisible: false,
      tableData: [
        {
          jobSetting: "工种1",
        },
        {
          jobSetting: "工种2",
        },
        {
          jobSetting: "工种3",
        },
        {
          jobSetting: "工种4",
        },
      ],
      currentPage: 1,
      pageSize: 10,
      totalData: 0,
      selectTime: 0,
      region: "",
      operateKey: null,
      editForm: {
        workTypeName: "",
        status: null,
      },
      formLabelWidth: "80px",
      rules: {
        workTypeName: [
          { required: true, message: "请输入工种名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请输入工种名称", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getWorkTypeList();
  },
  methods: {
    // 获取工种信息
    getWorkTypeList() {
      getWorkType({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        name: this.sercchData.name,
      }).then((res) => {
        // console.log(res)
        this.tableData = res.data.data.records;
        this.totalData = res.data.data.total;
      });
    },
    toAddWorkType() {
      this.operateKey = "insert";
      this.OptionEdit = true;
      // console.log(data)
      this.editForm = {
        workTypeName: "",
        status: 1,
      };
    },
    updateRow(data) {
      this.operateKey = "update";
      this.OptionEdit = true;
      // console.log(data)
      this.editForm = data;
    },
    deleteRow(id) {
      // console.log(id)
      // OptionDeleteVisible = true;
      this.$confirm("此操作将永久删除该工种, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(id)
          deleteWorkType(id).then((res) => {
            console.log(res);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getWorkTypeList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onSubmit() {
      this.getWorkTypeList();
    },
    // 页码
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getWorkTypeList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getWorkTypeList();
    },
    //时间选择器
    chooseTimeRange() {
      console.log(this.selectTime); // ["2019-08-01", "2019-09-01"] 结果为数组
    },
    //状态修改
    statusChange(res) {
      console.log(1,res);
      this.operateKey = "update";
      this.editForm = res;
      this.confirmUpdate();
      // this.editForm.status = res
      // this.editForm.workTypeName =
    },
    //确认修改
    confirmUpdate() {
      // console.log(this.editForm);
      if (this.operateKey == "update") {
        console.log('11111');
        updateOrInsertWorkType({
          name: this.editForm.workTypeName,
          status: this.editForm.status,
          workTypeId: this.editForm.id,
        }).then((res) => {
          this.$message({
            type: "success",
            message: "修改成功！",
          });
          this.OptionEdit = false;
          this.getWorkTypeList();
        });
      } else {
        updateOrInsertWorkType({
          name: this.editForm.workTypeName,
          status: this.editForm.status,
        }).then((res) => {
          this.$message({
            type: "success",
            message: "添加成功！",
          });
          this.OptionEdit = false;
          this.getWorkTypeList();
        });
      }
    },
    //取消
    cancleUpdate() {
      this.$message(
        this.operateKey == "update" ? "取消修改工种" : "取消新增工种"
      );
      this.OptionEdit = false;
      this.getWorkTypeList();
    },
  },
};
</script>


<style lang="scss">
.demo-ruleForm {
  margin-left: 50px;
}
.work-type-switch {
  /* switch按钮样式 */
  .switch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff !important;
  }
  /*打开时文字位置设置*/
  .switch .el-switch__label--right {
    z-index: 1;
  }
  /* 调整打开时文字的显示位子 */
  .switch .el-switch__label--right span {
    margin-right: 9px;
  }
  /*关闭时文字位置设置*/
  .switch .el-switch__label--left {
    z-index: 1;
  }
  /* 调整关闭时文字的显示位子 */
  .switch .el-switch__label--left span {
    margin-left: 9px;
  }
  /*显示文字*/
  .switch .el-switch__label.is-active {
    display: block;
  }
  /* 调整按钮的宽度 */
  .switch.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 70px !important;
    margin: 0;
  }
}

</style>

